<template>
  <div
    ref="divRef"
    class="button-all"
    :style="{ color: props.color, background: props.background }"
  >
  <div class="scherm"  v-show="loading" @click.stop="()=>{}"></div>
    <div class="button-left" :style="{ width: props.size, height: props.size }" v-show="loading">
      <SvgIcon name="loading" class="loading" :color="color"></SvgIcon>
    </div>
    <div :style="{ fontSize: props.size }">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts" name="button">
import { watch,ref } from 'vue';
import SvgIcon from "@/components/SvgIcon/index.vue";
interface Props {
  color?: string;         //按钮颜色包括字体和加载图标
  background?: string;    //背景
  size?: string;          //字体大小
  loading?:boolean        //是否在家
}
const props = withDefaults(defineProps<Props>(), {
  color: "white",
  background: "rgba(0,0,0,0)",
  size: "0.1042rem",
  loading:false
});
const loading = ref<boolean>(props.loading);

watch(()=>props.loading,(newValue:boolean)=> loading.value = newValue);

</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
